<template>
    <div>
        <van-nav-bar :title="$t('message.global.herocraftTwice')" left-text="" :right-text="$t('message.global.lotteryquery')" left-arrow  @click-right="onClickright" @click-left="onClickLeft" />
        <div style="height: 2.625rem;"></div>
        <!-- <p class="aa">{{page}}</p>  -->
        
        <van-pull-refresh v-model="upLoading" :disabled='onloadtype' @refresh="onRefresh">
		<van-list
		v-model="loading"
		:finished="finished"
		:finished-text="$t('message.global.Nomore')"
		@load="onLoad"
		animation-duration:100
		:offset='10'
		>
        <div class="double" >
            <h3>{{$t('message.global.resultsof')}}</h3>
           
            <p><span v-if="data.length>0" >{{$Format(data[0].cycle_ts*1000)}}{{$t('message.global.expect')}}</span></p>
            <div class="doubleimg" v-if="data.length>0">
                <span class="doubleimgspan"  @click="popUp(data[0].card_type,data[0].flip_card)" >
                    <img @click="popUp(data[0].card_type,data[0].flip_card)" v-if='data[0].card_type==1' src="../images/doublejoy/b8@2x.png" />
                <img @click="popUp(data[0].card_type,data[0].flip_card)" v-else-if='data[0].card_type==3' src="../images/doublejoy/b9@2x.png" />
                <img @click="popUp(data[0].card_type,data[0].flip_card)" v-else-if='data[0].card_type==2' src="../images/doublejoy/b10@2x.png" />
                <img @click="popUp(data[0].card_type,data[0].flip_card)" v-else src="../images/doublejoy/b11@2x.png" />
                </span>
                
                <div class="ipcon"  @click="popUp(data[0].card_type,data[0].flip_card)">
                    <span> <img :src="data[0].flip_card.icon" alt=""></span>
                    <br>
                    <span>{{$t('message.global.view')==1?data[0].flip_card.cn_title:data[0].flip_card.en_title}}</span>
                </div>
                </div>
        </div>
        <div class="doublecenter">
            {{$t('message.global.tothenext')}}{{time}}s
        </div>
        <div class="doublebottom" @click="changlexchange()">{{$t('message.global.Exchangefun')}}</div>
        <div class="texcenter">
            <p>{{$t('message.global.Mychange')}}</p>
            <p @click="winningStrategy()">{{$t('message.global.winningstrategy')}}</p>
        </div>
        <van-divider />
        <div></div>
        <div class="doulist" v-if="datalist.length>0"  v-for="(item,index) in datalist" :key="index" >
          
           <p class="doulistp">
               <!-- {{item.self_user_choose[index].status}} -->
               <!-- {{item.status}} -->
                        <!-- <h2>（共{{datalist[index].self_user_choose.length}}注）</h2> -->
                        <!-- <span><h4 style="font-weight: bold;color:rgba(88, 88, 103, 1)" ><a style="color:rgba(88, 88, 103, 1)" v-if='index==0'>本期</a>{{$Format(datalist[index].cycle_ts*1000)}}<a style="color:rgba(88, 88, 103, 1)" v-if='index>0' >期</a>（共{{datalist[index].self_user_choose.length}}注）</h4> </span> -->
                        <span><a style="color:rgba(88, 88, 103, 1)" v-if='index==0'>{{$t('message.global.currentperiod')}}</a>{{$Format(datalist[index].cycle_ts*1000)}}<a style="color:rgba(88, 88, 103, 1)" v-if='index>0' >{{$t('message.global.expect')}}</a>({{$t('message.global.common')}}{{datalist[index].self_user_choose.length}}{{$t('message.global.infuse')}}) </span>
                        <span v-if='item.status==1 || item.status==4'>{{$t('message.global.bethewinning')}}</span>
                        <span v-else-if="item.self_user_choose.commission1==0">{{$t('message.global.losinglottery')}}</span>
                        <span v-else-if="item.self_user_choose.commission1>0">{{$t('message.global.thewinning')}}</span>
                    </p>
            <!-- <div class="doublecen" v-for="(item,index) in datalist[0].self_user_choose" :key="index"> -->
               
            <div class="cent"  >              
                <div class="doublecen">
                     
                    <div class="doublespan" v-for="(itemin,indexin) in datalist[index].self_user_choose" :key="indexin">
                        
                        <p @click="popUp(itemin.card_type,itemin.flip_card)" v-if='itemin.card_type==2' style="position: relative">
                            
                            <img v-if='itemin.status==3' src="../images/doublejoy/b100@2x.png"/>
                            <img v-else src="../images/doublejoy/b10@2x.png"/>
                            <span style="position: absolute;;top: 25%;width:2.59375rem;text-align:center;left:0rem">
                                <a class="douimg" v-if='itemin.status==3' > <img :src="itemin.flip_card.icon2" alt=""></a>
                                <a class="douimg" v-else > <img :src="itemin.flip_card.icon" alt=""></a>
                               
                                <br>
                                <a class="bottomt" :class="itemin.status==3?'titlecolor':''" >{{$t('message.global.view')==1?itemin.flip_card.cn_title:itemin.flip_card.en_title}}</a> 
                            </span>
                        </p>
                        <p @click="popUp(itemin.card_type,itemin.flip_card)"  v-if='itemin.card_type==4' style="position: relative">
                            <img v-if='itemin.status==3' src="../images/doublejoy/b111@2x.png"/>
                            <img v-else src="../images/doublejoy/b11@2x.png"/>
                         <span style="position: absolute;text-align:center;top: 25%;width:2.59375rem;left:0rem">
                                 <a class="douimg" v-if='itemin.status==3' > <img :src="itemin.flip_card.icon2" alt=""></a>
                                <a class="douimg" v-else > <img :src="itemin.flip_card.icon" alt=""></a>
                                <br>
                                 <a class="bottomt" :class="itemin.status==3?'titlecolor':''" >{{$t('message.global.view')==1?itemin.flip_card.cn_title:itemin.flip_card.en_title}}</a>
                            </span>
                        </p>
                        <p @click="popUp(itemin.card_type,itemin.flip_card)"  v-if='itemin.card_type==1' style="position: relative">
                            <img v-if='itemin.status==3' src="../images/doublejoy/b88@2x.png"/>
                            <img v-else src="../images/doublejoy/b8@2x.png"/>
                         <span style="position: absolute;text-align:center;top: 25%;width:2.59375rem;left:0rem">
                               <a class="douimg" v-if='itemin.status==3' > <img :src="itemin.flip_card.icon2" alt=""></a>
                                <a class="douimg" v-else > <img :src="itemin.flip_card.icon" alt=""></a>
                                <br>
                                 <a class="bottomt" :class="itemin.status==3?'titlecolor':''" >{{$t('message.global.view')==1?itemin.flip_card.cn_title:itemin.flip_card.en_title}}</a>
                            </span>
                        </p>
                        <p @click="popUp(itemin.card_type,itemin.flip_card)"  v-if='itemin.card_type==3' style="position: relative">
                            <img v-if='itemin.status==3' src="../images/doublejoy/b99@2x.png"/>
                            <img v-else src="../images/doublejoy/b9@2x.png"/>
                         <span style="position: absolute;text-align:center;top: 25%;width:2.59375rem;left:0rem">
                               <a class="douimg" v-if='itemin.status==3' > <img :src="itemin.flip_card.icon2" alt=""></a>
                                <a class="douimg" v-else > <img :src="itemin.flip_card.icon" alt=""></a>
                                <br>
                                 <a class="bottomt" :class="itemin.status==3?'titlecolor':''">{{$t('message.global.view')==1?itemin.flip_card.cn_title:itemin.flip_card.en_title}}</a>
                            </span>
                        </p>
                    </div>
                  
                    <div class="doublespanbotm">
                        <span>{{$t('message.global.amount')}}{{item.self_user_choose.yy}}.0000 Clock</span>
                      
                        <br />
                        
                        <span v-if='item.self_user_choose.commission1>0' style="color: rgba(159, 1, 17, 1);margin-top: 0.3125rem;">{{$t('message.global.WinnerPaid')}}{{item.self_user_choose.commission1}}.0000 Clock</span>
                    </div>
                </div>
            <!-- <van-divider :style="{ color: '#fff', borderColor: '#fff', padding: '0 16px' }" />            -->
        </div>
       </div>
        <div class="backgroun" @click.stop="returnstop()" v-show="show"></div>
        <div :class="typeclass"  v-show="show">
           
            <p>
                <span style="">{{$t('message.global.view')==1?tone.cn_title:tone.en_title}}</span>
                <span >{{$t('message.global.view')==1?tone.cn_content:tone.en_content}}</span>
            </p>
            <div @click="occlude()"><img style="width: 1rem;height: 1.07rem;" src="../images/doublejoy/bingg@2x.png"/></div>

            <!--<img src="../images/doublejoy/bou7@2x.png"/>-->
        </div>
        <div v-show="noRecord" style="width: 100%;text-align: center;">
            <img style="width: 12.5rem;height: 12.5rem;" src="../images/doublejoy/kong2@2x.png"/>
            <!-- <p style="color: rgba(88, 88, 103, 1); font-size: 1rem;padding-top:1rem;">暂无记录</p> -->
            
        </div>
        </van-list>
		</van-pull-refresh>
        <div style="height: 1.25rem;width: 100%; "></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                newpassword: '',
                againpassword: '',
                show:false,
                typeclass:'meihua',
                design:'',
                noRecord:false,
                data:'',
                time:'',
                auth_timetimer:'',
                datalist:[],
                cycle_out:'',
                tone:'',
                 loading: true,   //是否处于加载状态
				finished: false,  //是否已加载完所有数据
				page:0,
				isloading:true,     //防止上拉多次请求接口重复
                upLoading:true,
                isuploading:true,  //防止下拉多次请求接口重复
                onloadtype:false,     //弹出不执行上拉
                disabledType:true
            }
        },
        mounted() {
            this.onLoad()
            this.authtme()
            // alert(navigator.language)
        },
        methods: {
            returnstop(){

            },
            onLoad() {      //上拉加载
            
				if(this.isloading){				
					setTimeout(() => {
					this.page+=1
                    this.init()					 			
					// 数据全部加载完成					
                }, 50);
				}
                
			},
            onRefresh() {       //下拉刷新
                if(this.isuploading){
                    setTimeout(() => {
                     this.isloading=false
                     this.page=1
                     this.init('1')
                }, 50);
                }
                
            },
            // 倒计时时间
            authtme(){
                var that=this
                this.$get('member/flip_card/record',{
                         'page':1,
                         "per_page":1,
                         "status":1
                     })
                     .then((res)=>{
                         
                         var timestamp = (new Date()).getTime();
                        //    this.time= timestamp-res.items[0].end_timestamp
                            //  var auth_time = this.$dateFormat(res.items[0].end_timestamp*1000-timestamp);
                              var SysSecond=res.items[0].end_timestamp*1000-timestamp
                            //  console.log(parseInt(SysSecond/1000))
                            console.log(SysSecond)
                            if(SysSecond>=0){
                                var auth_time =parseInt((SysSecond)/1000) 
                                 this.auth_timetimer =  setInterval(()=>{
                                auth_time--;
                                
                                // this.auth_time=auth_time	
                                // console.log(auth_time)                                      
				                if(auth_time<0){                                    
                                    // that.page=1
                                    // that.init('1')
                                    // that.isloading=false
                                    //  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                                    //  document.documentElement.scrollTop = document.body.scrollTop=(scrollTop-200)                          
                                     that.authtme()	
				                    clearInterval(this.auth_timetimer);	                    
				                }else{
                                    this.time= auth_time 
                                }
				            }, 1000);
                            }else{
                               this.time= 0 
                               that.authtme()
                            }
                             
                            //  var auth_time = 10;
                            
				           
                     })
                    
            },
            // 初始化查询我的兑换
            init(a){
                
                this.isloading=false
                this.isuploading=false
                    
                    var b=a
                    this.$get('member/flip_card/my_play',{
                        "page":this.page,
                        "per_page":5,
                        "status":''
                    })
                    .then((res)=>{
                         
                        if(b=='1'){
                            this.datalist=[]
                        }
                        this.isloading=true
                        this.isuploading=true
                        // this.datalist=res.items
                          this.loading = false;
                         this.upLoading = false;
                         
                        for(var i=0;i<res.items.length;i++){ 
                             
                            this.datalist.push(res.items[i])
                            var sum=0                         
                            var sumnum=0  

                            // list1.push(res.items[i].self_user_choose)                       

                            for(var j=0;j<res.items[i].self_user_choose.length;j++){
                                
                                sumnum=res.items[i].self_user_choose[j].commission
                                sum=(res.items[i].self_user_choose[j].price)*(res.items[i].self_user_choose[j].ratio)
                                 res.items[i].self_user_choose[j].sum1=sum
                                 var a=res.items[i].self_user_choose
                                 res.items[i].self_user_choose[j].sumnum1=sumnum+=sumnum
                                res.items[i].self_user_choose[j].sum1=sum
                               
                            }

                            var mm=0
                            var mm2=0
                            for(var k=0;k<a.length;k++){
                                mm=mm+a[k].sum1                               
                                mm2=mm2+a[k].commission                               
                            }
                            a.yy=mm
                            a.commission1=mm2
                             
                        }
                        // console.log(res.items) 
                    //   console.log(res.items)
                        // 显示loading和无数据      
                       
                         if (this.page >= res.pages) {                            
                            this.finished = true;
                            this.disabledType=false
						}else{
                            this.finished = false;
                        }
                         if(res.items.length<=0){
                            this.noRecord=true    
                        }else{
                           this.noRecord=false 
                        }
                        
                    })
                    
                     this.$get('member/flip_card/record',{
                         'page':1,
                         "per_page":1,
                         "status":2
                     })
                    .then((res)=>{
                        this.data=res.items
                        this.cycle_out=this.$Format(res.items.cycle_ts*1000)
                        
                    })
                    .catch((error)=>{
                         if (error.response.status == 401) {
                             var ua = navigator.userAgent.toLowerCase();
                                if(/iphone|ipad|ipod/.test(ua)) {
                                    window.webkit.messageHandlers.appTokenInvalid.postMessage('1');
                                    	
                                // if((typeof jsObj)!="undefined"){
                                        
                                //     jsObj.appTokenInvalid()
                                // }else{                               
                                // }
                            } else if(/android/.test(ua)) {					
                                if((typeof jsObj)!="undefined"){					   	
                                jsObj.appTokenInvalid()					  
                                }else{				   	                                   
                                }                            
                         }
                         }
                    })
                    
                    
               
            },
            /*返回到主界面*/
            onClickLeft() {
                
                  var ua = navigator.userAgent.toLowerCase();
                if(/iphone|ipad|ipod/.test(ua)) {
                     window.webkit.messageHandlers.goBack.postMessage('1');	
                // if((typeof jsObj)!="undefined"){	
                //     jsObj.goBack()
                // }else{
                
                // }
              } else if(/android/.test(ua)) {					
                if((typeof jsObj)!="undefined"){					   	
                   jsObj.goBack()					  
                }else{				   	
                    
                }												    
                }else{
                    this.$router.go(-1)
                }
               
            },
            /*开奖查询*/
            onClickright() {
                this.$router.push({
                    path: '/lotteryquery',
                })
                clearInterval(this.auth_timetimer);	
            },
            /*兑换*/
            changlexchange() {
                this.$router.push({
                    path: '/changlexchange',
                })
                clearInterval(this.auth_timetimer);	
            },
            /*中奖*/
            winningStrategy() {
                this.$router.push({
                    path: '/regulation',
                })
            },
            /*弹窗*/
            popUp(e,b) { 
                
                console.log(e)
                console.log(b) 
                this.tone=b             
                if(e=='1'){
                   this.typeclass='heitao' 
                }else if(e=='2'){
                   this.typeclass='meihua' 
                }else if(e=='3'){
                   this.typeclass='hongtao' 
                }else{
                    this.typeclass='fangkuai' 
                }
                this.onloadtype=true
                // 设置不能下拉
                this.finished = true;
                
                this.show=true
            },
            /*关闭弹窗*/
            occlude(){
                this.typeclass='meihua'
                this.onloadtype=false
                // 设置能下拉
                 if(this.disabledType){
                     this.finished = false
                }else{                   
                    this.finished = true
                }  
                   
                this.show=false 
            }

        }
    }
</script>

<style scoped>
    .van-nav-bar {
        /*background: linear-gradient(blue, pink);*/
        /*background: linear-gradient(to right, #FF6348,#ff755d,  #FFC267)*/
        position: fixed;
        top: 0rem;
        width: 100%;
    } 
    
    .doubleimgspan{
        width:4.325rem ;
        height:6.075rem;
         display: inline-block; 
          background: url(../images/doublejoy/bou7@2x.png) no-repeat left top;
        background-size: 100% 100%; 
    }  
    .aa{
        position: fixed;
    }
    .ipcon{
        margin-top: -4.675rem;
        color: rgba(159, 1, 17, 1)
    }
    .cent{
        height: 4.5rem;
        margin:0rem 1rem;
        border-bottom:.0625rem solid rgb(235, 237, 240) 
    }
    .ipcon span:nth-of-type(1){
        width: 1.25rem!important;
        height: 1.75rem!important;
        padding-bottom: .125rem;
        display: inline-block!important
    } 
    .douimg{
        width: .71875rem;
        height: 0.9rem;
        display: inline-block;
        color: rgba(159, 1, 17, 1)
    }  
    .bottomt{
       height: 0.875rem;
       display: inline-block ;
       line-height: 0.875rem;
       color: rgba(159, 1, 17, 1)
        
    }  
    .backgroun {
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #333;
        opacity: .7;
    }
    .meihua {
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin-left: -10.25rem;
        margin-top: -14.25rem;
        text-align: center;
    } 
    .meihua p {
        width: 20.5rem;
        height: 26.375rem;
        background: url(../images/doublejoy/bou7@2x.png) no-repeat 1.3rem top;
        background-size: 100% 100%;
    }   
    .meihua p span:nth-of-type(1) {
        width: 100%;
        margin-left: 0.6rem;
        font-size: 1.25rem;
        color: rgba(83, 37, 26, 1);
        margin-top: 2.325rem;
        display: inline-block;
        font-weight:600 ;
        letter-spacing:0.3125rem
    }
    .meihua p span:nth-of-type(2) {
         width: 10.75rem;      
        font-size: 0.75rem;
        color: rgba(83, 37, 26, 1);       
        display: inline-block;
        margin-top: 6.2rem;
        margin-left: 0.2rem;  
        text-align: left;
        height: 8rem;
        overflow: auto   
    }
    
    .fangkuai {
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin-left: -10.25rem;
        margin-top: -14.25rem;
        text-align: center;
    } 
    .fangkuai p {
        width: 20.5rem;
        height: 26.375rem;
        background: url(../images/doublejoy/bb18@2x.png) no-repeat 1.3rem top;
        background-size: 100% 100%;
    }   
    .fangkuai p span:nth-of-type(1) {
        width: 100%;
        margin-left: 0.6rem;
        font-size: 1.25rem;
        color: rgba(83, 37, 26, 1);
        margin-top: 2.325rem;
        display: inline-block;
        font-weight:600 ;
        letter-spacing:0.3125rem
    }
    .fangkuai p span:nth-of-type(2) {
         width: 10.75rem;      
        font-size: 0.75rem;
        color: rgba(83, 37, 26, 1);       
        display: inline-block;
        margin-top: 6.2rem;
        margin-left: 0.2rem;  
        text-align: left ;
            height: 8rem;  
            overflow: auto;  
    }
    .hongtao {
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin-left: -10.25rem;
        margin-top: -14.25rem;
        text-align: center;
    } 
    .hongtao p {
        width: 20.5rem;
        height: 26.375rem;
        background: url(../images/doublejoy/bb17@2x.png) no-repeat 1.3rem top;
        background-size: 100% 100%;
    }   
    .hongtao p span:nth-of-type(1) {
        width: 100%;
        margin-left: 0.6rem;
        font-size: 1.25rem;
        color: rgba(83, 37, 26, 1);
        margin-top: 2.325rem;
        display: inline-block;
        font-weight:600 ;
        letter-spacing:0.3125rem
    }
    .hongtao p span:nth-of-type(2) {
         width: 10.75rem;      
        font-size: 0.75rem;
        color: rgba(83, 37, 26, 1);       
        display: inline-block;
        margin-top: 6.2rem;
        margin-left: 0.2rem; 
        text-align: left ;
        height: 8rem;  
            overflow: auto;     
    }
    .heitao {
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin-left: -10.25rem;
        margin-top: -14.25rem;
        text-align: center;
    } 
    .heitao p {
        width: 20.5rem;
        height: 26.375rem;
        background: url(../images/doublejoy/bb19@2x.png) no-repeat 1.3rem top;
        background-size: 100% 100%;
    }   
    .heitao p span:nth-of-type(1) {
        width: 100%;
        margin-left: 0.6rem;
        font-size: 1.25rem;
        color: rgba(83, 37, 26, 1);
        margin-top: 2.325rem;
        display: inline-block;
        font-weight:600 ;
        letter-spacing:0.3125rem
    }
    .heitao p span:nth-of-type(2) {
         width: 10.75rem;      
        font-size: 0.75rem;
        color: rgba(83, 37, 26, 1);       
        display: inline-block;
        margin-top: 6.2rem;
        margin-left: 0.2rem; 
        text-align: left;
        height: 8rem;  
            overflow: auto;      
    }
    
    
    
    .doublespan p {
        width: 2.59375rem;
        height: 3.90625rem;
        display: inline-block;
    }
    .doublespan{
        width: 2.59375rem;
        float: left;
        color: rgba(159, 1, 17, 1);
        font-size: .5rem
    }
    
    .doublespanbotm span {
        font-size: 0.875rem;
        color: rgba(88, 88, 103, 1);
        display: inline-block;
    }
    .doublespanbotm{
        float:right;
    }
    .doublespan:nth-of-type(2){
        margin: 0px 10px
    }
    .doublespanbotm p:nth-of-type(2) {
        margin-top: 0.325rem;
        color: rgba(159, 1, 17, 1);
    }
    
    .doublespan p:nth-of-type(2) {
        margin: 0rem 0.3125rem;
    }
    
    .doublecenter {
        text-align: center;
        font-size: 0.9375rem;
        color: rgba(166, 166, 166, 1);
        margin-bottom: 0.8125rem;
    }
    
    .doublecen {
        /* display: flex; */
        /* justify-content: space-between; */
        /* padding: 0rem 1.25rem; */
    }
    
    .texcenter {
        display: flex;
        justify-content: space-between;
        padding: 0rem 1rem;
        margin-top: 1.875rem;
    }
    
    .doulistp {
        display: flex;
        justify-content: space-between;
        padding: 0.6rem 1rem;
        margin-bottom: 0.3rem;
    }
    
    .doulistp span:nth-of-type(1) {
        font-size: 0.875rem;
        /* font-weight: 600; */
        
        color:rgba(88, 88, 103, 1);
    }
    
    .doulistp span:nth-of-type(2) {
        font-size: 0.75rem;
        color: rgba(88, 88, 103, 1);
    }
    
    .texcenter p:nth-of-type(1) {
        font-size: 0.875rem;
        color: rgba(88, 88, 103, 1);
        font-weight: 600;
    }
    
    .texcenter p:nth-of-type(2) {
        font-size: 0.75rem;
        color: rgba(159, 1, 17, 1);
        border: 0.03125rem solid rgba(159, 1, 17, 1);
        padding: 0.15625rem 0.6125rem;
        border-radius: 0.6125rem;
    }
    
    .doublebottom {
        width: 21.375rem;
        height: 3.425rem;
        margin: 0rem auto;
        background: url(../images/doublejoy/bou55@2x.png) no-repeat left top;
        background-size: 100% 100%;
        text-align: center;
        font-size: 1rem;
        color: #fff;
        line-height: 3.425rem;
         -webkit-animation-name: scaleDraw; /*关键帧名称*/
            -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
            -webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
            -webkit-animation-duration: 2.6s; /*动画所花费的时间*/

    }
    @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                transform: scale(1);  /*开始为原始大小*/
            }
            25%{
                transform: scale(1.05); /*放大1.1倍*/
            }
            50%{
                transform: scale(1);
            }
            75%{
                transform: scale(1.05);
            }
        }

    
    .double {
        width: 21.375rem;
        height: 12.5rem;
        background: url(../images/doublejoy/bou3@2x.png) no-repeat left top;
        background-size: 100% 100%;
        margin: 1rem auto 1rem auto;
        border-radius: 0.325rem;
        text-align: center;
        color: #fff;
    }
    
    .double h3 {
        font-size: 1rem;
        padding-top: 1.0625rem;
    }
    
    .doubleimg {
        width: 4.375rem;
        height: 6.5rem;
        margin: 1.0625rem auto 0 auto;
        background: ;
    }
    
    .double p span {
        border: 0.06125rem solid rgba(197, 199, 210, 1);
        display: inline-block;
        padding: 0.1125rem 0.6375rem;
        font-size: 0.75rem;
        color: rgba(197, 199, 210, 1);
        border-radius: 0.625rem;
        margin-top: 0.325rem;
    }
    
    .double img {
        /* width: 100%;
        height: 100%; */
    }
    
    .van-nav-bar__text {
        color: rgba(88, 88, 103, 1);

    }
    
    .registercen {
        padding: 0rem 1rem;
        text-align: left;
        line-height: 1.875rem;
        font-size: 0.8125rem;
        color: rgba(166, 166, 166, 1);
    }
    
    .van-nav-bar__title {
        color: #333;
        font-weight: 600
    }
    
    .van-nav-bar .van-icon {
        color: #333;
    }
    .titlecolor{
        color: #fff
    }
</style>